<template>
  <div>
    <el-dialog
      title="调整会员余额"
      :visible.sync="dialogVisible"
      width="750px"
      :close-on-click-modal="false"
      @close="close"
    >
      <div v-loading="dialogLoading" class="dialog-edit-balance flexRBS" element-loading-text="调整中">
        <!-- 会员信息 -->
        <div class="dialog-l">
          <ul class="info-avatar">
            <li class="avatar">
              <img v-if="vipDetail.customer.headImg" :src="vipDetail.customer.headImg" alt>
            </li>
            <li
              class="name app-line-one"
            >{{ vipDetail.member.name?vipDetail.member.name:vipDetail.customer.nickName }}</li>
          </ul>
          <div class="info-content">
            <info-list-card :data="balanceCard" />
          </div>
        </div>

        <!-- 表单 -->
        <div class="dialog-r">
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="140px"
            class="demo-ruleForm"
          >
            <el-form-item>
              <el-radio v-model="editType" label="充值" />
              <el-radio v-model="editType" label="扣款" />
            </el-form-item>
            <el-form-item prop="balance" :label="editType == '充值' ? '实充金额(元)' : '扣除实充金额(元)'">
              <el-input v-model="form.balance" :placeholder="`请输入${editType}金额`" maxlength="10" />
            </el-form-item>
            <el-form-item prop="giftBalance" :label="editType == '充值' ? '赠送金额(元)' : '扣除赠送金额(元)'">
              <el-input v-model="form.giftBalance" :placeholder="`请输入${editType}金额`" maxlength="10" />
            </el-form-item>
            <el-form-item prop="remarks" :label="editType=='充值'?'充值备注':'扣款备注'">
              <el-input
                v-model="form.remarks"
                type="textarea"
                placeholder="请输入备注信息"
                maxlength="50"
                show-word-limit
                :autosize="{ minRows: 2, maxRows: 10}"
              />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" round @click="hide">取 消</el-button>
        <el-button size="small" round type="primary" @click="handleSubmit('form')">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addVipAccountBalance, reduceVipAccountBalance } from '@/api/vip'
import { validateMoney, validateStrLen } from '@/utils/validate.js'
export default {
  props: {
    vipDetail: {
      type: Object,
      require: true
    }
  },
  data() {
    /**
       * 表单校验方法相关
       */
    // 实充余额
    const validateBalance = (rule, value, callback) => {
      if (value === '') {
        callback(new Error(`请输入${this.editType}金额，无需调整则输入0`))
      } else if (!validateMoney(value, true)) {
        callback(new Error('请输入0或正整数，正小数（小数位不超过2位）'))
      } else if (value - 999999.99 > 0) {
        callback('超过限额999999.99')
      } else if (
        this.editType === '扣款' &&
          value - (this.vipDetail.balance - this.vipDetail.rechargeLock) / 100 > 0
      ) {
        callback(new Error('不得大于可用实充余额'))
      } else {
        callback()
      }
    }

    // 赠送余额
    const validateGiftBalance = (rule, value, callback) => {
      if (value === '') {
        callback(new Error(`请输入${this.editType}金额，无需调整则输入0`))
      } else if (!validateMoney(value, true)) {
        callback(new Error('请输入0或正整数，正小数（小数位不超过2位）'))
      } else if (value - 999999.99 > 0) {
        callback('超过限额999999.99')
      } else if (
        this.editType === '扣款' &&
          value - (this.vipDetail.giftBalance - this.vipDetail.giftLock) / 100 > 0
      ) {
        callback(new Error('不得大于可用赠送余额'))
      } else {
        callback()
      }
    }
    // 备注
    const validateRemarks = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入备注'))
      } else if (!validateStrLen(value, 60)) {
        callback(new Error('长度不超过30个汉字或60个字符'))
      } else {
        callback()
      }
    }
    return {
      /**
         * 表单校验字段相关
         */
      rules: {
        balance: [
          { required: true, validator: validateBalance, trigger: 'blur' }
        ],
        giftBalance: [
          { required: true, validator: validateGiftBalance, trigger: 'blur' }
        ],
        remarks: [
          {
            required: true,
            validator: validateRemarks,
            trigger: ['blur', 'change']
          }
        ]
      },
      // 配置
      dialogVisible: false,
      dialogLoading: false,
      resolve: null,
      reject: null,
      // 数据
      balanceCard: [
        { name: '总余额', value: 0 },
        { name: '冻结实充余额', value: 0 },
        { name: '可用实充余额', value: 0 },
        { name: '冻结赠送余额', value: 0 },
        { name: '可用赠送余额', value: 0 }
      ],
      form: {
        balance: '', // 余额
        giftBalance: '', // 赠送余额
        remarks: '' // 说明
      },
      editType: '充值' // 余额弹框修改类型
    }
  },
  watch: {
    editType(val) {
      this.$refs.form.resetFields()
    }
  },
  methods: {
    open() {
      this.show()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    show() {
      console.log(this.vipDetail)
      // 余额卡片
      // 总余额
      this.balanceCard[0].value =
          '￥' +
          this.$options.filters.parseNumberToThousands(
            this.vipDetail.balance + this.vipDetail.giftBalance
          )
      // 冻结实充余额
      this.balanceCard[1].value =
          '￥' +
          this.$options.filters.parseNumberToThousands(
            this.vipDetail.rechargeLock
          )
      // 可用实充余额
      this.balanceCard[2].value =
          '￥' +
          this.$options.filters.parseNumberToThousands(
            this.vipDetail.balance - this.vipDetail.rechargeLock
          )
      // 冻结赠送余额
      this.balanceCard[3].value =
          '￥' +
          this.$options.filters.parseNumberToThousands(this.vipDetail.giftLock)
      // 可用赠送余额
      this.balanceCard[4].value =
          '￥' +
          this.$options.filters.parseNumberToThousands(
            this.vipDetail.giftBalance - this.vipDetail.giftLock
          )
      this.dialogVisible = true
    },

    close() {
      this.$refs.form.resetFields()
    },

    hide() {
      this.resolve = null
      this.reject = null
      this.dialogVisible = false
    },

    // 提交余额变更
    handleSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const h = this.$createElement
          this.$msgbox({
            title: '温馨提示',
            message: h('p', null, [
              h(
                'div',
                null,
                `你确定要对会员${
                  this.vipDetail.member.name
                    ? this.vipDetail.member.name
                    : this.vipDetail.customer.nickName
                }进行${this.editType}操作：`
              ),
              h(
                'div',
                null,
                `${this.editType}实充金额(元)：${this.form.balance}`
              ),
              h(
                'div',
                null,
                `${this.editType}赠送金额(元)：${this.form.giftBalance}`
              )
            ]),
            roundButton: true,
            type: 'warning',
            center: true,
            showCancelButton: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          })
            .then(action => {
              this.dialogLoading = true
              const data = Object.assign({}, this.form)
              data.memberId = this.vipDetail.member.id
              data.balance = this.$math.mul(data.balance, 100, 0)
              data.giftBalance = this.$math.mul(data.giftBalance, 100, 0)
              // 充值
              if (this.editType === '充值') {
                addVipAccountBalance(data)
                  .then(res => {
                    this.dialogLoading = false
                    this.$notify({
                      title: '成功',
                      message: '余额充值成功',
                      type: 'success',
                      duration: 2000,
                      offset: 40
                    })
                    this.resolve && this.resolve()
                    this.hide()
                  })
                  .catch(err => {
                    this.dialogLoading = false
                  })
              }

              // 扣款
              if (this.editType === '扣款') {
                reduceVipAccountBalance(data)
                  .then(res => {
                    this.dialogLoading = false
                    this.$notify({
                      title: '成功',
                      message: '余额扣款成功',
                      type: 'success',
                      duration: 2000,
                      offset: 40
                    })
                    this.resolve && this.resolve()
                    this.hide()
                  })
                  .catch(err => {
                    this.dialogLoading = false
                  })
              }
            })
            .catch(err => {})
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  /* 余额弹框 */
  .dialog-edit-balance {
    .info-avatar {
      display: flex;
      height: 40px;
      margin: 15px 0;
      li {
        float: left;
        margin-right: 10px;
      }
      .avatar {
        overflow: hidden;
        flex: 0 0 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid #e7e7e7;
      }
      .name {
        flex: 1 1 auto;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        font-weight: bold;
        color: $dark-font-color;
      }
    }
    .info-content {
      margin-left: 45px;
    }
    .dialog-l {
      width: 40%;
    }
    .dialog-r {
      width: 60%;
      border-left: 1px solid #e6e6e6;
    }
  }
</style>
